<template>
  <div class="containter-main">
    <!-- 基础表单 -->
    <SkyCardPanel title="基础表单">
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm" :align="'upDown'" :textAlign="'left'">
          <div class="SkyFormRow">
            <sky-form-item label="基础input框" class="col_8">
              <sky-input v-model="form.commonInput" :maxlength="10"></sky-input>
            </sky-form-item>
            <sky-form-item label="超文本弹出框" class="col_8">
              <sky-input-pop-up v-model="form.hypertext" placeholder="请输入内容"></sky-input-pop-up>
            </sky-form-item>
            <sky-form-item label="禁用" class="col_8">
              <sky-input v-model="form.disabledInput" placeholder="" disabled></sky-input>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="可清空" class="col_8">
              <sky-input v-model="form.clearInput" clearable></sky-input>
            </sky-form-item>
            <sky-form-item label="后置按钮" class="col_8">
              <sky-input v-model="form.afterIconInput" placeholder="请输入内容">
                <sky-icon-font name="Search" slot="suffix"></sky-icon-font>
              </sky-input>
            </sky-form-item>
            <sky-form-item label="前置按钮" class="col_8">
              <sky-input v-model="form.beforeIconInput" placeholder="请输入内容">
                <sky-icon-font name="Search" slot="prefix"></sky-icon-font>
              </sky-input>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="金额千分位 保留两位小数" class="col_8">
              <sky-input v-model="form.money" v-thousands.money="form"  clearable></sky-input>
            </sky-form-item>
            <sky-form-item label="比率 保留四位小数" class="col_8">
              <sky-input v-model="form.rate" v-rate.rate="form" placeholder="请输入内容"></sky-input>
            </sky-form-item>
            <sky-form-item label="下拉框" class="col_8">
              <sky-select v-model="form.select">
                <sky-option v-for="item in selectOptions" :label="item.label" :value="item.value" :key="item.value"></sky-option>
              </sky-select>
            </sky-form-item>
          </div>

          <div class="SkyFormRow">
            <sky-form-item label="文本框">
              <sky-textarea :rows="10" v-model="form.textarea" :maxlength="10"></sky-textarea>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <!-- 代码 -->
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              &lt;SkyCardPanel title="基础表单"&gt;
                &lt;div slot="main" class="containter-form"&gt;
                  &lt;sky-form :model="form" ref="SkyInlineForm" :align="'upDown'" :textAlign="'left'"&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="基础input框" class="col_8"&gt;
                        &lt;sky-input v-model="form.commonInput" :maxlength="10"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="超文本弹出框" class="col_8"&gt;
                        &lt;sky-input-pop-up v-model="form.hypertext" placeholder="请输入内容"&gt;&lt;/sky-input-pop-up&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="禁用" class="col_8"&gt;
                        &lt;sky-input v-model="form.disabledInput" placeholder="" disabled&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="可清空" class="col_8"&gt;
                        &lt;sky-input v-model="form.clearInput" clearable&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="后置按钮" class="col_8"&gt;
                        &lt;sky-input v-model="form.afterIconInput" placeholder="请输入内容"&gt;
                          &lt;sky-icon-font name="Search" slot="suffix"&gt;&lt;/sky-icon-font&gt;
                        &lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="前置按钮" class="col_8"&gt;
                        &lt;sky-input v-model="form.beforeIconInput" placeholder="请输入内容"&gt;
                          &lt;sky-icon-font name="Search" slot="prefix"&gt;&lt;/sky-icon-font&gt;
                        &lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="金额千分位 保留两位小数" class="col_8"&gt;
                        &lt;sky-input v-model="form.money" v-thousands.money="form"  clearable&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="比率 保留四位小数" class="col_8"&gt;
                        &lt;sky-input v-model="form.rate" v-rate.rate="form"  placeholder="请输入内容"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="下拉框" class="col_8"&gt;
                        &lt;sky-select v-model="form.select"&gt;
                          &lt;sky-option v-for="item in selectOptions" :label="item.label" :value="item.value" :key="item.value"&gt;&lt;/sky-option&gt;
                        &lt;/sky-select&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;

                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="文本框"&gt;
                        &lt;sky-textarea :rows="10" v-model="form.textarea" :maxlength="10"&gt;&lt;/sky-textarea&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                  &lt;/sky-form&gt;
                &lt;/div&gt;
              &lt;/SkyCardPanel&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              export default {
                return {
                  form: {
                    commonInput: "",
                    hypertext: "",
                    disabledInput: "",
                    clearInput: "",
                    afterIconInput: "",
                    beforeIconInput: "",
                    money: "",
                    rate: "",
                    textarea: "",
                    select: "",
                  },
                  selectOptions: [
                    {
                      label: "阿里巴巴",
                      value: 1,
                    },
                    {
                      label: "腾讯",
                      value: 2,
                    },
                    {
                      label: "字节跳动",
                      value: 3,
                    },
                  ],
                  
                };
              },
            };
             
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
    <!-- 单选 -->
    <SkyCardPanel title="单选">
      <div slot="main" class="containter-form">
        <sky-form :model="inlie" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="单选框" class="col_8">
              <SkySingleChooseGroup v-model="form.radio">
                <SkySingleChoose label="政务" value="0"></SkySingleChoose>
                <SkySingleChoose label="地产" value="1"></SkySingleChoose>
                <SkySingleChoose label="金融" value="2"></SkySingleChoose>
              </SkySingleChooseGroup>
            </sky-form-item>
            <sky-form-item label="单选框（不可修改）" class="col_8">
              <SkySingleChooseGroup v-model="form.radio2">
                <SkySingleChoose label="政务" value="0" disabled></SkySingleChoose>
                <SkySingleChoose label="地产" value="1" disabled></SkySingleChoose>
                <SkySingleChoose label="金融" value="2" disabled></SkySingleChoose>
              </SkySingleChooseGroup>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="单选条件" class="col_8">
              <SkyRadioGroup v-model="form.radio3">
                <SkyRadio label="政务" value="0"></SkyRadio>
                <SkyRadio label="地产" value="1"></SkyRadio>
                <SkyRadio label="金融" value="2"></SkyRadio>
                <SkyRadio label="教育" value="3"></SkyRadio>
                <SkyRadio label="运维" value="4"></SkyRadio>
              </SkyRadioGroup>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <!-- 代码 -->
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              &lt;SkyCardPanel title="单选"&gt;
                &lt;div slot="main" class="containter-form"&gt;
                  &lt;sky-form :model="inlie" ref="SkyInlineForm"&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="单选框" class="col_8"&gt;
                        &lt;SkySingleChooseGroup v-model="form.radio"&gt;
                          &lt;SkySingleChoose label="政务" value="0"&gt;&lt;/SkySingleChoose&gt;
                          &lt;SkySingleChoose label="地产" value="1"&gt;&lt;/SkySingleChoose&gt;
                          &lt;SkySingleChoose label="金融" value="2"&gt;&lt;/SkySingleChoose&gt;
                        &lt;/SkySingleChooseGroup&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="单选框（不可修改）" class="col_8"&gt;
                        &lt;SkySingleChooseGroup v-model="form.radio2"&gt;
                          &lt;SkySingleChoose
                            label="政务"
                            value="0"
                            disabled
                          &gt;&lt;/SkySingleChoose&gt;
                          &lt;SkySingleChoose
                            label="地产"
                            value="1"
                            disabled
                          &gt;&lt;/SkySingleChoose&gt;
                          &lt;SkySingleChoose
                            label="金融"
                            value="2"
                            disabled
                          &gt;&lt;/SkySingleChoose&gt;
                        &lt;/SkySingleChooseGroup&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="单选条件" class="col_8"&gt;
                        &lt;SkyRadioGroup v-model="form.radio3"&gt;
                          &lt;SkyRadio label="政务" value="0"&gt;&lt;/SkyRadio&gt;
                          &lt;SkyRadio label="地产" value="1"&gt;&lt;/SkyRadio&gt;
                          &lt;SkyRadio label="金融" value="2"&gt;&lt;/SkyRadio&gt;
                          &lt;SkyRadio label="教育" value="3"&gt;&lt;/SkyRadio&gt;
                          &lt;SkyRadio label="运维" value="4"&gt;&lt;/SkyRadio&gt;
                        &lt;/SkyRadioGroup&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                  &lt;/sky-form&gt;
                &lt;/div&gt;
              &lt;/SkyCardPanel&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
                <code class="javascript">
              export default {
                return {
                  form: {
                    radio: "0",
                    radio2: "0",
                    radio3: "0",
                  },
                };
              },
            };
             
          </code>
             
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
    <!-- 多选 -->
    <SkyCardPanel title="多选">
      <div slot="main" class="containter-form">
        <sky-form :model="inlie" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="多选框" class="col_8">
              <SkyMuchChooseGroup v-model="form.checkbox1">
                <SkyMuchChoose label="政务" value="0"></SkyMuchChoose>
                <SkyMuchChoose label="地产" value="1"></SkyMuchChoose>
                <SkyMuchChoose label="金融" value="2"></SkyMuchChoose>
                <SkyMuchChoose label="教育" value="3"></SkyMuchChoose>
                <SkyMuchChoose label="运维" value="4"></SkyMuchChoose>
              </SkyMuchChooseGroup>
            </sky-form-item>
            <sky-form-item label="多选框" class="col_8">
              <SkyMuchChooseGroup v-model="form.checkbox2">
                <SkyMuchChoose label="政务" value="0" disabled></SkyMuchChoose>
                <SkyMuchChoose label="地产" value="1" disabled></SkyMuchChoose>
                <SkyMuchChoose label="金融" value="2" disabled></SkyMuchChoose>
                <SkyMuchChoose label="教育" value="3" disabled></SkyMuchChoose>
                <SkyMuchChoose label="运维" value="4" disabled></SkyMuchChoose>
              </SkyMuchChooseGroup>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="多选条件" class="col_8">
              <SkyCheckboxGroup v-model="form.checkbox3">
                <SkyCheckbox label="政务" value="0"></SkyCheckbox>
                <SkyCheckbox label="地产" value="1"></SkyCheckbox>
                <SkyCheckbox label="金融" value="2"></SkyCheckbox>
                <SkyCheckbox label="教育" value="3"></SkyCheckbox>
                <SkyCheckbox label="运维" value="4"></SkyCheckbox>
              </SkyCheckboxGroup>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <!-- 代码 -->
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
           &lt;SkyCardPanel title="多选"&gt;
              &lt;div slot="main" class="containter-form"&gt;
                &lt;sky-form :model="inlie" ref="SkyInlineForm"&gt;
                  &lt;div class="SkyFormRow"&gt;
                    &lt;sky-form-item label="多选框" class="col_8"&gt;
                      &lt;SkyMuchChooseGroup v-model="form.checkbox1"&gt;
                        &lt;SkyMuchChoose label="政务" value="0"&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="地产" value="1"&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="金融" value="2"&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="教育" value="3"&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="运维" value="4"&gt;&lt;/SkyMuchChoose&gt;
                      &lt;/SkyMuchChooseGroup&gt;
                    &lt;/sky-form-item&gt;
                    &lt;sky-form-item label="多选框" class="col_8"&gt;
                      &lt;SkyMuchChooseGroup v-model="form.checkbox2"&gt;
                        &lt;SkyMuchChoose label="政务" value="0" disabled&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="地产" value="1" disabled&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="金融" value="2" disabled&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="教育" value="3" disabled&gt;&lt;/SkyMuchChoose&gt;
                        &lt;SkyMuchChoose label="运维" value="4" disabled&gt;&lt;/SkyMuchChoose&gt;
                      &lt;/SkyMuchChooseGroup&gt;
                    &lt;/sky-form-item&gt;
                  &lt;/div&gt;
                  &lt;div class="SkyFormRow"&gt;
                    &lt;sky-form-item label="多选条件" class="col_8"&gt;
                      &lt;SkyCheckboxGroup v-model="form.checkbox3"&gt;
                        &lt;SkyCheckbox label="政务" value="0"&gt;&lt;/SkyCheckbox&gt;
                        &lt;SkyCheckbox label="地产" value="1"&gt;&lt;/SkyCheckbox&gt;
                        &lt;SkyCheckbox label="金融" value="2"&gt;&lt;/SkyCheckbox&gt;
                        &lt;SkyCheckbox label="教育" value="3"&gt;&lt;/SkyCheckbox&gt;
                        &lt;SkyCheckbox label="运维" value="4"&gt;&lt;/SkyCheckbox&gt;
                      &lt;/SkyCheckboxGroup&gt;
                    &lt;/sky-form-item&gt;
                  &lt;/div&gt;
                &lt;/sky-form&gt;
              &lt;/div&gt;
            &lt;/SkyCardPanel&gt;
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
                <code class="javascript">
              export default {
                return {
                  form: {
                      checkbox1: ["0"],
                      checkbox2: ["0"],
                      checkbox3: ["0"],
                  },
                };
              },
            };
             
          </code>
             
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
    <!-- 内敛验证 -->
    <SkyCardPanel title="内联验证">
      <div slot="header-right">
        <!-- <SkyButton type="primary">操作</SkyButton> -->
      </div>
      <div slot="main" class="containter-form">
        <sky-form :model="inlie" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="用户名" :prop="'username'" :rules="[
                {
                  required: true,
                  message: '请输入用户名',
                  trigger: ['change', 'blur'],
                },
              ]" class="col_8">
              <sky-input v-model="inlie.username"></sky-input>
            </sky-form-item>
            <sky-form-item label="密码" :prop="'password'" :rules="[{ validator: validatePass, trigger: 'blur' }]" class="col_8">
              <sky-input v-model="inlie.password" type='password'></sky-input>
            </sky-form-item>
          </div>
          <div class="SkyFormRow SkyFormButtonList">
            <sky-form-item>
              <SkyButton type="primary" @click="submitForm('SkyInlineForm')">提交</SkyButton>
              <SkyButton type="secondary" @click="reset('SkyInlineForm')">重置</SkyButton>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <!-- 代码 -->
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //表单及验证
              
        &lt;sky-form :model="inlie" ref="SkyInlineForm"&gt;
          &lt;sky-form-item label="用户名" prop="username" :rules="[
                { required: true, message: '请输入用户名', trigger: ['change','blur'] },
              ]"&gt;
            &lt;sky-input v-model="inlie.username"&gt;&lt;/sky-input&gt;
          &lt;/sky-form-item&gt;
          &lt;sky-form-item label="密码" prop="password" :rules="[
                { validator: validatePass, trigger: 'blur' },
              ]"&gt;
            &lt;sky-input v-model="inlie.password"&gt;&lt;/sky-input&gt;
          &lt;/sky-form-item&gt;
          &lt;sky-form-item&gt;
            &lt;SkyButton type="primary" @click="submitForm('SkyInlineForm')"&gt;提交&lt;/SkyButton&gt;
            &lt;SkyButton type="secondary" @click="reset('SkyInlineForm')"&gt;重置&lt;/SkyButton&gt;
          &lt;/sky-form-item&gt;
        &lt;/sky-form&gt;
        
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //表单及验证
              
              export default {
                data () {
                  var validatePass = (rule, value, callback) => {
                    if (value.length<6) {
                      callback(new Error('密码位数为6'));
                    } else {
                      callback();
                    }
                  };
                  return {
                    inlie: {
                      username: '',
                      password: '',
                    },
                    validatePass: validatePass
                  }
                },
                methods: {
                  submitForm (form) {
                    // 表单全局校验
                    this.$refs[form].validate(valid => {
                      if (valid) {
                        this.$SkyMessage('登录成功', 'success')
                      } else {
                        this.$SkyMessage('校验失败', 'error')
                      }
                    })
                  },
                  reset (form) {
                    this.$refs[form].resetFields()
                  }
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
    <!-- 表单验证错误项自动定位 -->
    <SkyCardPanel title="表单验证错误项自动定位">
      <div slot="main" class="containter-form">
        <sky-form :model="model" :rules="rules" ref="sky-form">
          <div class="SkyFormRow">
            <sky-form-item label="用户名" prop="username" class="col_8">
              <sky-input v-model="model.username"></sky-input>
            </sky-form-item>
            <sky-form-item label="密码" prop="password" class="col_8">
              <sky-input v-model="model.password"></sky-input>
            </sky-form-item>
            <sky-form-item label="邮箱" prop="email" class="col_8">
              <sky-input v-model="model.email"></sky-input>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="手机号" prop="phone" class="col_8">
              <sky-input v-model="model.phone"></sky-input>
            </sky-form-item>
            <sky-form-item label="公司" prop="company" class="col_8">
              <sky-input v-model="model.company"></sky-input>
            </sky-form-item>
            <sky-form-item label="职位" prop="position" class="col_8">
              <sky-input v-model="model.position"></sky-input>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="家庭住址" prop="homeaddress">
              <sky-textarea :rows="10" v-model="model.homeaddress" :reSize="'none'"></sky-textarea>
            </sky-form-item>
          </div>
          <div class="SkyFormRow SkyFormButtonList">
            <sky-form-item>
              <SkyButton type="primary" @click="submitForm('sky-form')">提交</SkyButton>
              <SkyButton type="secondary" @click="reset('sky-form')">重置</SkyButton>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>
    <!-- 代码 -->
    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //表单及验证
              
              &lt;SkyCardPanel title="表单验证错误项自动定位"&gt;
                &lt;div slot="main" class="containter-form"&gt;
                  &lt;sky-form :model="model" :rules="rules" ref="sky-form"&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="用户名" prop="username" class="col_8"&gt;
                        &lt;sky-input v-model="model.username"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="密码" prop="password" class="col_8"&gt;
                        &lt;sky-input v-model="model.password"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="邮箱" prop="email" class="col_8"&gt;
                        &lt;sky-input v-model="model.email"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="手机号" prop="phone" class="col_8"&gt;
                        &lt;sky-input v-model="model.phone"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="公司" prop="company" class="col_8"&gt;
                        &lt;sky-input v-model="model.company"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                      &lt;sky-form-item label="职位" prop="position" class="col_8"&gt;
                        &lt;sky-input v-model="model.position"&gt;&lt;/sky-input&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow"&gt;
                      &lt;sky-form-item label="家庭住址" prop="homeaddress"&gt;
                        &lt;sky-textarea :rows="10" v-model="model.homeaddress" :reSize="'none'"&gt;&lt;/sky-textarea&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                    &lt;div class="SkyFormRow SkyFormButtonList"&gt;
                      &lt;sky-form-item&gt;
                        &lt;SkyButton type="primary" @click="submitForm('sky-form')"&gt;提交&lt;/SkyButton&gt;
                        &lt;SkyButton type="secondary" @click="reset('sky-form')"&gt;重置&lt;/SkyButton&gt;
                      &lt;/sky-form-item&gt;
                    &lt;/div&gt;
                  &lt;/sky-form&gt;
                &lt;/div&gt;
              &lt;/SkyCardPanel&gt;
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //表单及验证
              
              export default {
                data () {
                  return {
                    model: {
                      username: '',
                      password: '',
                      email: '',
                      phone: '',
                      company: '',
                      position: '',
                      homeaddress: '',
                    },
                    rules: {
                      username: [
                        { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
                      ],
                      password: [
                        { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
                      ],
                      email: [
                        { required: true, message: '请输入邮箱', trigger: ['change', 'blur'] },
                      ],
                      phone: [
                        { required: true, message: '请输入手机号', trigger: ['change', 'blur'] },
                      ],
                      company: [
                        { required: true, message: '请输入公司', trigger: ['change', 'blur'] },
                      ],
                      position: [
                        { required: true, message: '请输入职位', trigger: ['change', 'blur'] },
                      ],
                      homeaddress: [
                        { required: true, message: '请输入家庭住址', trigger: ['change', 'blur'] },
                      ],
                    }
                  }
                },
                methods: {
                  submitForm (form) {
                    // 表单全局校验
                    this.$refs[form].validate(valid => {
                      if (valid) {
                        this.$SkyMessage('登录成功', 'success')
                      } else {
                        this.$SkyMessage('校验失败', 'error')
                      }
                    })
                  },
                  reset (form) {
                    this.$refs[form].resetFields()
                  }
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
  export default {
    data () {
      var validatePass = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error("密码位数为6"));
        } else {
          callback();
        }
      };
      return {
        form: {
          commonInput: "",
          hypertext: "",
          disabledInput: "",
          clearInput: "",
          afterIconInput: "",
          beforeIconInput: "",
          money: "",
          rate: "",
          textarea: "",
          select: "",
          radio: "0",
          radio2: "0",
          radio3: "0",
          checkbox1: ["0"],
          checkbox2: ["0"],
          checkbox3: ["0"],
        },
        selectOptions: [
          {
            label: "阿里巴巴",
            value: 1,
          },
          {
            label: "腾讯",
            value: 2,
          },
          {
            label: "字节跳动",
            value: 3,
          },

        ],
        inlie: {
          username: "",
          password: "",
        },
        model: {
          username: "",
          password: "",
          email: "",
          phone: "",
          company: "",
          position: "",
          homeaddress: "",
        },
        rules: {
          username: [
            {
              required: true,
              message: "请输入用户名",
              trigger: ["change", "blur"],
            },
          ],
          password: [
            {
              required: true,
              message: "请输入密码",
              trigger: ["change", "blur"],
            },
          ],
          email: [
            {
              required: true,
              message: "请输入邮箱",
              trigger: ["change", "blur"],
            },
          ],
          phone: [
            {
              required: true,
              message: "请输入手机号",
              trigger: ["change", "blur"],
            },
          ],
          company: [
            {
              required: true,
              message: "请输入公司",
              trigger: ["change", "blur"],
            },
          ],
          position: [
            {
              required: true,
              message: "请输入职位",
              trigger: ["change", "blur"],
            },
          ],
          homeaddress: [
            {
              required: true,
              message: "请输入家庭住址",
              trigger: ["change", "blur"],
            },
          ],
        },
        validatePass: validatePass,
      };
    },
    methods: {
      submitForm (form) {
        // 表单全局校验
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.$SkyMessage("登录成功", "success");
          } else {
            this.$SkyMessage("校验失败", "error");
          }
        });
      },
      reset (form) {
        this.$refs[form].resetFields();
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>